<!DOCTYPE html>
<html lang="zxx" class="no-js" xmlns:th="http://www.thymeleaf.org">

<head>
	<!-- Mobile Specific Meta -->
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<!-- Favicon-->
	<link rel="shortcut icon" href="img/fav.png">
	<!-- Author Meta -->
	<meta name="author" content="CodePixar">
	<!-- Meta Description -->
	<meta name="description" content="">
	<!-- Meta Keyword -->
	<meta name="keywords" content="">
	<!-- meta character set -->
	<meta charset="UTF-8">
	<!-- Site Title -->
	<title>Contact</title>

	<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i|Roboto:400,500" rel="stylesheet">
	<!--
			CSS
			============================================= -->
	<link rel="stylesheet" th:href="@{/rec/css/linearicons.css}">
	<link rel="stylesheet" th:href="@{/rec/css/font-awesome.min.css}">
	<link rel="stylesheet" th:href="@{/rec/css/availability-calendar.css}">
	<link rel="stylesheet" th:href="@{/rec/css/magnific-popup.css}">
	<link rel="stylesheet" th:href="@{/rec/css/nice-select.css}">
	<link rel="stylesheet" th:href="@{/rec/css/owl.carousel.css}">
	<link rel="stylesheet" th:href="@{/rec/css/bootstrap.css}">
	<link rel="stylesheet" th:href="@{/rec/css/bootstrap-datepicker.css}">
	<link rel="stylesheet" th:href="@{/rec/css/main.css}">
	<link th:href="@{/rec/layer/mobile/need/layer.css}" rel="stylesheet">



</head>

<body>

	<!--================ Start Header Area =================-->
	<header class="header-area">
		<div class="container">
			<div class="header-wrap">
				<div class="header-top d-flex justify-content-between align-items-center navbar-expand-md">
					<div class="col menu-left">
						<a href="/">主页</a>
						<a href="/menu">菜单</a>
						<a href="/about">关于</a>
					</div>
					<div class="col-3 logo">
						<a href="/"><img class="mx-auto" th:src="@{/rec/img/diancan.png}"  alt=""></a>
					</div>
					<nav class="col navbar navbar-expand-md justify-content-end">

						<!-- Toggler/collapsibe Button -->
						<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
							<span class="lnr lnr-menu"></span>
						</button>

						<!-- Navbar links -->
						<div class="collapse navbar-collapse menu-right" id="collapsibleNavbar">
							<ul class="navbar-nav justify-content-center w-100">
								<li class="nav-item hide-lg">
									<a class="nav-link" href="/">主页</a>
								</li>
								<li class="nav-item hide-lg">
									<a class="nav-link" href="/menu">菜单</a>
								</li>
								<li class="nav-item hide-lg">
									<a class="nav-link" href="/about">关于</a>
								</li>
								<!-- Dropdown -->
								<li class="nav-item dropdown">
									<a class="nav-link dropdown-toggle active" href="#" id="navbardrop" data-toggle="dropdown">
										其他
									</a>
									<div class="dropdown-menu">
										<a class="dropdown-item" href="/contact">联系我们</a>
										<a class="dropdown-item" href="/elements">元素</a>
									</div>
								</li>
								<li class="nav-item dropdown">
									<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
										博客
									</a>
									<div class="dropdown-menu">
										<a class="dropdown-item" href="/bloghome">博客</a>
										<a class="dropdown-item" href="/blogsingle">博客详情</a>
									</div>
								</li>
								<li class="nav-item">
									<a class="nav-link" href="/gallery">美食展览</a>
								</li>
							</ul>
						</div>
					</nav>
				</div>
			</div>
		</div>
	</header>
	<!--================ End Header Area =================-->

	<!--================ Start banner Area =================-->
	<section class="banner-area relative">
		<div class="container">
			<div class="row height align-items-center justify-content-center">
				<div class="banner-content col-lg-6">
					<h1>联系我们</h1>
					<hr>
					<div class="breadcrmb">
						<p>
							<a href="/">主页</a>
							<span class="lnr lnr-arrow-right"></span>
							<a href="/contact">联系</a>
						</p>
					</div>
				</div>
			</div>
		</div>
	</section>


	<!--左侧标记头部-->
<div style=" float: left;">
<!--	<h1>-->
<!--		sdasd-->
<!--	</h1>-->

</div>

	<!--左侧标记尾部-->

	<!--================ End banner Area =================-->

	<!--================ Contact Area =================-->
	<section class="contact-area section-gap">
		<div class="container">
			<div class="row align-items-start">
				<div class="col-lg-6 col-md-6">
					<div id="contactMap">

						<h1>相关推荐：</h1>
						<br>
						<br>

						<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
						<button type="button" class="btn btn-primary" onclick="Onyucai()"><h3>育才中学</h3>（点击了解更多）</button>
						<br>
						<br>
						<br>
						<br>

						<!-- Indicates a successful or positive action -->
						<button type="button" class="btn btn-success">（成功）Success</button>
						<br>
						<br>
						<br>
						<br>
						<!-- Contextual button for informational alert messages -->
						<button type="button" class="btn btn-info">（一般信息）Info</button>
						<br>
						<br>
						<br>
						<br>

						<!-- Indicates caution should be taken with this action -->
						<button type="button" class="btn btn-warning">（警告）Warning</button>
						<br>
						<br>
						<br>
						<br>

						<!-- Indicates a dangerous or potentially negative action -->

					</div>

				</div>
				<div class="offset-lg-1 col-lg-5 col-md-6">
					<div class="section-title relative">
						<h1>
							DC <br>
							美食 <br>
							酒店 <br>
						</h1>
						<div class="mb-20">
							<p>boss:杰克·吕江</p>
							<p>boos:肉丝·小二</p>
							<p></p>
						</div>
						<div class="mb-20">
							<p>666-66666-66</p>
							<p>888-88888-88</p>
						</div>
						<div class="mail">
							<p>www.hxyool.cn</p>
							<p>www.lvool.cn</p>
							<p>www.anwenkong.com</p>
						</div>
					<form class="contact-form"  th:action="@{/call/mail}" method="post">
						<div class="row">
							<div class="col-lg-12 d-flex flex-column mb-20">
								<input name="username" placeholder="Contact Name" onfocus="this.placeholder = ''" onblur="this.placeholder = '姓名'"
								 class="form-control" required="" type="text">
							</div>
							<div class="col-lg-12 d-flex flex-column mb-20">
								<input name="email" placeholder="Email Address" onfocus="this.placeholder = ''" onblur="this.placeholder = '邮件'"
								 class="form-control" required="" type="email">
							</div>
							<div class="col-lg-12 d-flex flex-column mb-20">
								<input name="phone" placeholder="Phone Number" onfocus="this.placeholder = ''" onblur="this.placeholder = '手机号'"
								 class="form-control" required="" type="text">
							</div>
							<div class="col-lg-12 d-flex flex-column">
								<textarea class="form-control" name="msg" placeholder="发送的消息" onfocus="this.placeholder = ''"
								 onblur="this.placeholder = 'Post a message'" required=""></textarea>
							</div>

							<div class="col-lg-12 d-flex justify-content-end">
								<button type="submit" class="primary-btn mt-30 text-uppercase">发送信息</button>
							</div>
							<div class="alert-msg"></div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</section>
	<!--================ End Contact Area =================-->

	<!--================ Start Footer Area =================-->
	<footer class="footer-area section-gap">
		<div class="container">
			<div class="row">
				<div class="col-lg-2 col-md-6 col-sm-6">
					<div class="single-footer-widget">
						<h4>热门 产品</h4>
						<ul>
							<li><a href="#">Managed Website</a></li>
							<li><a href="#">Manage Reputation</a></li>
							<li><a href="#">Power Tools</a></li>
							<li><a href="#">Marketing Service</a></li>
						</ul>
					</div>
				</div>
				<div class="col-lg-2 col-md-6 col-sm-6">
					<div class="single-footer-widget">
						<h4>快速 链接</h4>
						<ul>
							<li><a href="#">Jobs</a></li>
							<li><a href="#">Brand Assets</a></li>
							<li><a href="#">Investor Relations</a></li>
							<li><a href="#">Terms of Service</a></li>
						</ul>
					</div>
				</div>
				<div class="col-lg-2 col-md-6 col-sm-6">
					<div class="single-footer-widget">
						<h4>特 征</h4>
						<ul>
							<li><a href="#">Jobs</a></li>
							<li><a href="#">Brand Assets</a></li>
							<li><a href="#">Investor Relations</a></li>
							<li><a href="#">Terms of Service</a></li>
						</ul>
					</div>
				</div>
				<div class="col-lg-2 col-md-6 col-sm-6">
					<div class="single-footer-widget">
						<h4>资 源</h4>
						<ul>
							<li><a href="#">Guides</a></li>
							<li><a href="#">Research</a></li>
							<li><a href="#">Experts</a></li>
							<li><a href="#">Agencies</a></li>
						</ul>
					</div>
				</div>
				<div class="col-lg-4  col-md-6 col-sm-6">
					<div class="single-footer-widget">
						<h4>时事通讯</h4>
						<p>随时了解我们最新的</p>
						<div class="" id="mc_embed_signup">
							<form target="_blank" action="https://spondonit.us12.list-manage.com/subscribe/post?u=1462626880ade1ac87bd9c93a&amp;id=92a4423d01"
							 method="get">
								<div class="input-group">
									<input type="text" class="form-control" name="EMAIL" placeholder="Enter Email Address" onfocus="this.placeholder = ''"
									 onblur="this.placeholder = 'Enter Email Address '" required="">
									<div class="input-group-btn">
										<button class="btn btn-default" type="submit">
											<span class="lnr lnr-arrow-right"></span>
										</button>
									</div>
									<div class="info"></div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
			<div class="footer-bottom row align-items-center justify-content-between">
				<p class="footer-text m-0 col-lg-6 col-md-12">Copyright © 2018 All rights reserved | This template is made with
					<span class="lnr lnr-heart"></span> by <a href="#">Colorlib</a></p>
				<div class="col-lg-6 col-sm-12 footer-social">
					<a href="#"><i class="fa fa-facebook"></i></a>
					<a href="#"><i class="fa fa-twitter"></i></a>
					<a href="#"><i class="fa fa-dribbble"></i></a>
					<a href="#"><i class="fa fa-behance"></i></a>
				</div>
			</div>
		</div>
	</footer>
	<!--================ End Footer Area =================-->

	<script th:src="@{/rec/js/vendor/jquery-2.2.4.min.js}"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
	 crossorigin="anonymous"></script>
	<script th:src="@{/rec/js/vendor/bootstrap.min.js}"></script>
	<script th:src="@{/rec/js/owl.carousel.min.js}"></script>
	<script th:src="@{/rec/js/jquery.sticky.js}"></script>
	<script th:src="@{/rec/js/parallax.min.js}"></script>
	<script th:src="@{/rec/js/jquery.nice-select.min.js}"></script>
	<script th:src="@{/rec/js/jquery.ajaxchimp.min.js}"></script>
	<script th:src="@{/rec/js/jquery.magnific-popup.min.js}"></script>
	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBhOdIF3Y9382fqJYt5I_sswSrEw5eihAA"></script>
	<script th:src="@{/rec/js/bootstrap-datepicker.js}"></script>
	<script th:src="@{/rec/js/main.js}"></script>
	<script th:src="@{/rec/layer/layer.js}"></script>


	<script>
		function Onyucai(){
			layer.open({
				type: 2,
				title: false,
				area: ['630px', '360px'],
				shade: 0.8,
				closeBtn: 0,
				shadeClose: true,
				content: 'http://img_hxyool.cn/yc.mp4'
			});

		}
	</script>

</body>

</html>